<div class="modal-header">
    <h3>Skin Manager</h3>
</div>
<style>
    .modal-body {
        max-height: 450px !important;
        padding-bottom: 15px;;
    }

    .modal-body > div {
        margin-top: 15px;
        padding-left: 15px;
    }

    .modal-header h3 a{
        float: right;
        display: block;
        text-transform: none;
        font-size: 14px;
        color: white;
    }

    .modal-header h3 a:hover{
        color: #eee;
    }

    .modal-body > div > span:first-child {
        width: 100px !important;
        display: inline-block;
    }
    .modal-footer{
        padding-bottom: 0;
    }

    .font-preview  {
        margin-top: 0 !important;
        background-color: #eee;
        box-sizing: border-box;
        overflow: auto;
        padding: 10px;
        padding-left: 0 !important;
        width: 100%;
        height: 90px;
        display: table;
        position: relative;
    }

    .font-preview span {
        text-align: center;
        vertical-align: middle;
        display: table-row !important;
        color: red;
    }

    .font-preview .edit-text {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

    .font-preview textarea {
        position: absolute;
        top: 0;
        left: 0;
        width: 97%;
        height: 87%;
    }

    .font-name i {
        display: none;
    }

    .wf-loading .font-name i {
        display: inline-block;
    }


    .text-color span, .text-hover-color span {
        display: block;
    }

    .j-opt-color{
        display: inline-block;
    }

    .save-as {
        position: absolute;
        left: 17px;
    }
</style>
<div class="modal-body skin-manager">
    <div class="popup-option" data-ng-show="customSkinsCount() > 0">
        <span>Custom Skins</span>
        <ul>
            <li data-ng-repeat="skin in skins" data-ng-show="!skin.default">{{skin.name}} <a data-ng-click="deleteSkin($index)" class="btn red med">X</a></li>
        </ul>
    </div>
    <div class="popup-option">
        <span>Active Skin</span>
        <ul>
            <li data-ng-repeat="store in stores">{{store.name}}
                <select ui-select2="{minimumResultsForSearch: -1}" data-ng-model="store.skin_id" data-ng-change="skinChange()">
                    <option data-ng-repeat="skin in skins" value="{{skin.id}}">{{skin.name}}</option>
                </select>
            </li>
        </ul>
    </div>
</div>
<div class="modal-footer">
    <a class="btn btn-primary blue save-as" ng-click="saveAs()">Save as new skin</a>
    <a class="btn btn-primary green" ng-click="ok()">OK</a>
    <br /><br />
</div>